import classNames from 'classnames';
import React, { useRef, useState } from 'react';
import { YmCssMotion } from 'ym-design';
import './index.less';

const Div = React.forwardRef<HTMLDivElement, any>((props, ref) => {
  const { holderef, ...restProps } = props;
  const pTestRef = useRef<HTMLParagraphElement>(null);

  React.useEffect(() => {
    console.log('DIV >>> Mounted!');
    return () => {
      console.log('DIV >>> UnMounted!');
    };
  }, []);

  return (
    <div className="div-comp">
      {/*  ref=((node) => {}) */}
      <div {...restProps} ref={holderef} />
      <p ref={pTestRef}></p>
    </div>
  );
});

function CssMotionAnimationPage() {
  const [show, setShow] = useState<boolean>(false);
  //离开后销毁dom
  const [removeOnLeave, setRemoveOnLeave] = useState<boolean>(true);
  const demoBlockRef = useRef<HTMLDivElement>(null);

  const onTrigger = () => {
    setShow((prev) => !prev);
  };

  const onRemoveOnLeave = () => {
    setRemoveOnLeave((prev) => !prev);
  };

  return (
    <div>
      <div style={{ margin: '30px 0' }}>
        <label>
          <input type="checkbox" onChange={onTrigger} checked={show} />
          Show Component
        </label>

        <label>
          <input
            type="checkbox"
            onChange={onRemoveOnLeave}
            checked={removeOnLeave}
          />
          removeOnLeave
        </label>
      </div>
      <YmCssMotion
        visible={show}
        forceRender={false}
        motionName="animation"
        // removeOnLeave={false}
        removeOnLeave={removeOnLeave}
        onVisibleChanged={(visible) => {
          console.log('Visible Changed:', visible);
        }}
        ref={demoBlockRef}
      >
        {({ style, className }, motionRef): any => (
          <Div
            holderef={motionRef}
            className={classNames('demo-block2', className)}
            style={style}
          />
        )}
      </YmCssMotion>
    </div>
  );
}

export default CssMotionAnimationPage;
